<template>
  <a-modal v-model:visible="showModal" :mask-closable="false" title="付款计划" @cancel="onClose" width="65vw" unmount-on-close>
    <a-table :columns="columns" :data="data" />

    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { planList } from '@/api/asset/carTransfer'

  const showModal = ref(false)

  const columns = [
    {
      title: '期数',
      dataIndex: 'payableNumStr',
    },
    {
      title: '应付款日',
      dataIndex: 'payableTimeStr',
    },
    {
      title: '每期应付金额(元)',
      dataIndex: 'payableAmount',
    },
    {
      title: '每期实付金额(元)',
      dataIndex: 'paymentAmount',
    },
    {
      title: '费用状态',
      dataIndex: 'payableStatusName',
    },
    {
      title: '完成付款时间',
      dataIndex: 'paymentTime',
    },
    {
      title: '备注',
      dataIndex: 'billRemark',
    },
  ]

  const data = ref([])

  const show = (record) => {
    showModal.value = true
    getPlanList(record)
  }

  const onClose = () => {
    showModal.value = false
    data.value = []
  }

  const getPlanList = (record) => {
    planList({
      lnstalmentNum: record.contractCarPurchaseEditVo.lnstalmentNum,
      contractAmount: record.amount,
      lnstalmentFirstDate: record.contractCarPurchaseEditVo.initialDate,
      initialAmount: record.contractCarPurchaseEditVo.initialAmount,
      balanceAmount: record.contractCarPurchaseEditVo.balanceAmount,
      initialAmountRate: record.contractCarPurchaseEditVo.initialAmountRate,
      balanceAmountRate: record.contractCarPurchaseEditVo.balanceAmountRate,
    }).then((res) => {
      if (res.code == 200) {
        data.value = res.result
      }
    })
  }

  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          addFee({ ...form.value })
            .then((res) => {
              console.log(res)
              Message.success(res.message)
              onClose()
              done()
              resolve()
            })
            .catch((err) => {
              console.log(err)
              // Message.error(err.message)
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped></style>
